<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>购物车页面</title>
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="../css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="../css/optstyle.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../js/vue2.5.js" ></script>
		<script type="text/javascript" src="../js/axios.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="../js/global.js" ></script>
		<script type="text/javascript" src="../js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script src="../js/param.js"></script>
	</head>

	<body>
		<div class="clear"></div>
			<!--购物车 -->	
			<div class="concent container">
				<div id="cartTable">
					<div class="cart-table-th">
						<div class="wp">
							<div class="th th-chk">
								<div id="J_SelectAll1" class="select-all J_SelectAll">
								</div>
							</div>
							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-op">
								<div class="td-inner">操作</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
					
					<div class="item-list">
						<div class="bundle  bundle-last ">
							<div class="bundle-hd">
							</div>
							<div class="clear"></div>
							<div class="bundle-main">
								<ul class="item-content clearfix" v-for="(cart,index) in cartData">
									<li class="td td-chk">
										<div class="cart-checkbox ">
											<input class="check" :value="cart.cid" v-model="goodsCheck"   name="shangping" class="shangping" type="checkbox">
											<input class="gid" type="hidden" v-model="cart.goods.gid"> 
											<label for="J_CheckBox_170769542747"></label>
										</div>
									</li>
									<li class="td td-item">
										<div class="item-pic">
											<a href="#" target="_blank" data-title="" class="J_MakePoint" data-point="tbcart.8.12">
												<img :src="baseUrl+'/goods/getgoods?gid='+cart.goods.gid"  style="width:100px;height:100px;"></a>
										</div>
										<div class="item-info">
											<div class="item-basic-info">
												<a href="#" target="_blank" class="item-title J_MakePoint" data-point="tbcart.8.11">{{cart.goods.gname}}</a>
											</div>
										</div>
									</li>
									<li class="td td-info">
										<div class="item-props">
											<span class="sku-line">描述：{{cart.goods.gdesc}}</span>
											<span class="sku-line"></span>
										</div>
									</li>
									<li class="td td-price">
										<div class="item-price price-promo-promo">
											<div class="price-content">
												<div class="price-line">
													<em class="price-original">{{cart.goods.gprice*1.5}}.00</em>
												</div>
												<div class="price-line">
													<em class="J_Price price-now" tabindex="0">{{cart.goods.gprice}}.00</em>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-amount">
										<div class="amount-wrapper ">
											<div class="item-amount ">
												<div class="sl">
													<input class="min am-btn" name="" type="button" value="-"  @click="updateQty(index,-1)"/>
													<input class="text_box" name="" type="text" v-model="cart.qty" style="width:30px;" />
													<input class="add am-btn" name="" type="button" value="+"   @click="updateQty(index,1)"/>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-sum">
										<div class="td-inner">
											<em tabindex="0" class="J_ItemSum number">{{cart.goods.gprice*cart.qty}}.00</em>
										</div>
									</li>
									<li class="td td-op">
										<div class="td-inner">
											<a title="立即购买" class="btn-fav" href="javascript:;" @click="add(cart.cid,cart.goods.gid,index)">
										                  立即购买</a>
											<a title="移入收藏夹" class="btn-fav" href="javascript:;"  @click="addcollection(cart.goods.gid)">
										                  移入收藏夹</a>
											<a href="javascript:;" data-point-url="#" class="delete" @click="remove(cart.cid,index)" >
										                  删除</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>

				<div class="float-bar-wrapper">
					
					<div id="J_SelectAll2" class="select-all J_SelectAll">
						<div class="cart-checkbox">
							<input class="check-all check"  name="select-all" id="selectBtn" value="true" type="checkbox"  v-model="selectStatus" @change="selectAllItem()" >
							<label for="J_SelectAllCbx2"></label>
						</div>
						<span>全选</span>
					</div>
					
					<div class="operations">
						<a href="javascript:;" hidefocus="true" class="deleteAll" >删除</a>
						<a href="javascript:;" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
					</div>
					<div class="float-bar-right">
						<div class="amount-sum">
							<span class="txt">已选商品</span>
							<em id="J_SelectedItemsCount">{{goodsCheck.length}}</em><span class="txt">件</span>
							<div class="arrow-box">
								<span class="selected-items-arrow"></span>
								<span class="arrow"></span>
							</div>
						</div>
						<div class="price-sum">
							<span class="txt">合计:</span>
							<strong class="price">¥<em id="J_Total">{{getTotalPrice()}}.00</em></strong>
						</div>
						<div class="btn-area">
							<button  id="sub" @click="sub()" style="width:100%" class="submit-btn " aria-label="请注意如果没有选择宝贝，将无法结算" disabled >
								结&nbsp;算</button>
						</div>
					</div>

				</div>

				<div class="footer">
					<div class="footer-hd">
						<p>
						
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 XXXX <a href="http://www.cssmoban.com/" target="_blank" title="模板之家"></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
						</p>
					</div>
				</div>

			</div>

			
			
		<!--引导 -->
		<div class="navCir">
			<li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>	
			<li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>					
		</div>
		<script>
		var uid = localStorage.getItem('id');
		var shangping = document.getElementsByName('shangping');
		var aid = localStorage.getItem('aid');
		var vue = new Vue({
			el:'.container',
			data:{
				cartData:[],
				baseUrl:baseUrl,
				goodsCheck:[],
				selectStatus:false,
				gids:[],
				qtys:[],
				cids:[]
			},methods:{
				query:function(){
					axios.get(baseUrl + '/cart/get',{
						params:{
							uid:uid
						}
					})
						.then(function(response) {
							this.cartData = response.data;
							
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
				},
				//修改数量
				updateQty: function(index, val) {
					this.cartData[index].qty += val; //加一或者减一
				},
				//删除物品
				remove: function(cid,index) {
					if(!window.confirm('确定移除吗？'))
						return;
					axios.get(baseUrl + '/cart/delete',{
						params:{
							cid:cid
						}
					})
						.then(function(response) {
							
							this.cartData.splice(index, 1);
							layer.msg('删除记录成功！');
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
				},
				//返回订单总金额
				getTotalPrice: function() {
					var totalPrice = 0;
					//遍历购物车数组数据
					if(shangping){
						for(var i = 0 ;i<shangping.length;i++){
							if(shangping[i].checked==true)
								totalPrice+=this.cartData[i].qty * this.cartData[i].goods.gprice;
						}
					}
					return totalPrice;
				},
				//获得选中商品的数量
				selectAllItem:function(){
					this.goodsCheck = [];
					var count = 0;			
					if (this.selectStatus) {
						this.cartData.forEach(function(cart){													
							this.goodsCheck.push(cart.cid);
							count++;
							
						}.bind(this));
					}					
				},
				add:function(cid,gid,index){
					that = this;
					
					layer.confirm('订单信息是否正确？', {
					    btn: ['正确','取消'] //按钮
					}, function(){
							layer.msg("已确认订单");
						  axios.post(baseUrl + '/order/add', $.param({
								uid:uid,
								ostate:"待付款",
								date:new Date(),
								gid:gid,
								qty:that.cartData[index].qty,
								aid:aid
							}))
							.then(function(response) {
								   axios.get(baseUrl + '/cart/delete',{
									params:{
										cid:cid
									}
								})
									.then(function(response) {
										that.cartData.splice(index, 1);
											
									}.bind(that))
									.catch(function(error) {
										layer.msg('请求失败');
									});  
								
							}.bind(that))
							.catch(function(error) {
								layer.msg('付款失败');
							}); 
					}, function(){
						layer.msg("取消订单");
					});
					
					
				},
				addcollection:function(gid){
					axios.post(baseUrl + '/collection/add',
							 $.param({
								 	gid:gid,
									uid:uid
								})
							
					)
						.then(function(response) {
							layer.msg('加入收藏夹成功');
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
				},
				//提交订单
				sub:function(){
					that = this;
					 if(shangping){
						for(var i = 0 ;i<shangping.length;i++){
							if(shangping[i].checked==true)
								this.gids.push(this.cartData[i].goods.gid);
								this.qtys.push(this.cartData[i].qty);
								this.cids.push(this.cartData[i].cid);
						}
						//加入选择的订单
						axios.post(baseUrl + '/order/addAll',
								 $.param({
									 	gids:this.gids.toString(),
										qtys:this.qtys.toString(),
										uid:uid,
										ostate:"待付款",
										aid:aid,
										num:this.goodsCheck.length
										
									})
								
						)
							.then(function(response) {
								
							}.bind(this))
							.catch(function(error) {
								layer.msg('请求失败');
							});
						//添加完成后清除对应的购物车数据
						 axios.post(baseUrl + '/cart/deleteAll',
								 $.param({
									 	cids:this.cids.toString()
									})
								 
							)
							.then(function(response) {
								layer.msg("结算成功！5s后跳转到我的订单可以查看")
								//成功后跳转到订单界面
								setTimeout(function(){
									location.href="../person/order.html";
								},5000);
								
										
							}.bind(that))
							.catch(function(error) {
								layer.msg('请求失败');
							});  
							
					} 
					
				}
			},mounted:function(){
				this.query();
				this.selectAllItem();
			}	
		});
		
		var shangping = document.getElementsByName('shangping');
		var selectBtn = document.getElementById('selectBtn');
		var clearCart = document.getElementById("clearCart");
		$('.bundle-main').on('click','.shangping',function(){
			var t =0 ;
			for(var i = 0 ;i<shangping.length;i++){
				if(shangping[i].checked==true)
					t++;
			}
			if(t==shangping.length){
				selectBtn.checked=true;
			}else {
				selectBtn.checked=false;
			}	
		});
		
		
		
		selectBtn.onclick = function (){
			for(var i = 0;i<shangping.length;i++){
				if(selectBtn.checked){
					shangping[i].checked=true;
				}else{
					shangping[i].checked=false;
				}
			}
			if($('#selectBtn').prop("checked")==true){
				$('#sub').attr("disabled", false);
				$("#sub").css("width","0%");
				$("#sub").css("border","none");
				$("#sub").css("margin-left","-34px");
			}else{
				$('#sub').attr("disabled", true);
				$("#sub").css("margin-left","0px");
				$("#sub").css("width","100%");
			}
			
		}
	</script>
	</body>
	
</html>